<template>
    <sub-box>
        <div class="details white-block">
            <div class="text-right">
                <el-button size="small" @click="closeDetails">返回</el-button>
            </div>

            <div class="detailsBox">
                <div class="toolbar">
                    <div class="serAllocation">
                        <breadcrumb :title="'服务配置信息'"></breadcrumb>
                    </div>
                    <!--                    <div class="text-right btn">-->
                    <!--                        <el-button type="primary" @click="messagePrompt">标准服务重载</el-button>-->
                    <!--                    </div>-->
                </div>
                <div class="detailsMsg mt30">
                    <el-row>
                        <el-col :xl="8" :md="12" :sm="12">
                            <span>服务名称：</span>
                            <p>{{serConMsg.servname}}</p>
                        </el-col>
                        <el-col :xl="8" :md="12" :sm="12">
                            <span>服务编码：</span>
                            <p>
                                {{serConMsg.servcode}}
                            </p>
                        </el-col>
                        <el-col :xl="8" :md="12" :sm="12">
                            <span>服务版本：</span>
                            <p>{{serConMsg.servversion}}</p>
                        </el-col>
                        <el-col :xl="8" :md="12" :sm="12">
                            <span>状态：</span>
                            <p v-if="serConMsg.status === '1'">
                                在用
                            </p>
                            <p v-else>
                                注销
                            </p>
                        </el-col>
                    </el-row>
                </div>
                <div class="serConsumeMsg mt30">
                    <div class="toolbar">
                        <breadcrumb :title="'服务消费者信息'"></breadcrumb>
                    </div>
                    <div class="table mt30">
                        <table-example :data="serConsumeTable" :tableColumn="serConsumeHeader"
                                       :slotColumns="slotColumns"
                                       @cell-mouse-enter="handClick"
                                       @row-click="handleClick1"
                                       :highLight="true"
                                       @tabCurrentChange="tabCurrentChangeDetails"
                                       class="mt20">
                            <template slot="codeId" slot-scope="scope">
                                <span>{{scope.$index+1}}</span>
                            </template>
                        </table-example>
                        <page :data="serConPage" v-if="serConPage" class="mt30 page"
                              @jumpPage="serConsumePage"></page>
                    </div>
                </div>
                <div class="deployMsg mt30">
                    <div class="toolbar">
                        <breadcrumb :title="'部署信息'"></breadcrumb>
                    </div>
                    <div class="deployBox mt30">
                        <ul>
                            <li v-for="item in deploy" :key="item.id">
                                <div class="img" v-if="item.status === '1'">
                                    <el-image
                                        :src="'/static/images/use.png'"></el-image>
                                </div>
                                <div class="img" v-else>
                                    <el-image
                                        :src="'/static/images/nouse.png'"></el-image>
                                </div>
                                <span>{{item.instancename}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </sub-box>

</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'
    import subBox from '../../components/layout/layout-sub'

    export default {
        data() {
            return {
                serConPage: null,
                serConsumeIndex: 1,
                serConsumeTable: [],
                serConsumeHeader: [
                    {
                        prop: 'codeId',
                        label: '序号',
                        minWidth: 80,
                        align: 'center',
                        headerAlign: 'center',
                        tooltip: true
                    },
                    {
                        prop: 'systemName',
                        label: '消费者系统',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'groupname',
                        label: '群组名称',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'ip',
                        label: 'IP',
                        minWidth: 100,
                        align: 'center',
                        headerAlign: 'center',
                        tooltip: true
                    }
                ],
                slotColumns: ['codeId'],
                serviceid: '',
                deploy: [], // 部署
                atomcode: '',
                serConMsg: [], // 服务配置信息
                servcode: ''
            }
        },
        mounted() {
            if (this.$route.query.serviceid) this.serviceid = this.$route.query.serviceid
            this.getData()
        },
        methods: {
            // 分页
            serConsumePage(serConsumeIndex) {
                if (serConsumeIndex) this.serConsumeIndex = serConsumeIndex
                this.$http.get('/EsbServiceConsumer/selectServiceList', {
                    serviceid: this.serviceid,
                    current: this.serConsumeIndex || 1,
                    size: 5
                }).then(result => {
                    if (result.success) {
                        this.serConsumeTable = result.data.records
                        this.serConPage = result.data
                    }
                })
            },

            getData() {
                // 服务配置信息
                this.$http.get('/EsbInboundMain/select', {
                    serviceid: this.serviceid
                }).then(result => {
                    if (result.success) {
                        this.serConMsg = result.data
                        console.log(this.serConMsg)
                    }
                })

                // 服务消费信息
                this.$http.get('/EsbServiceConsumer/selectServiceList', {
                    serviceid: this.serviceid,
                    current: this.serConsumeIndex || 1,
                    size: 5
                }).then(result => {
                    if (result.success) {
                        this.serConsumeTable = result.data.records
                        this.serConPage = result.data
                        delete this.serConPage['records']
                    }
                })

                // 部署信息
                this.$http.get('/EsbServiceAtomDeploy/selectOne', {
                    deploytype: 0,
                    serviceid: this.serviceid
                }).then(result => {
                    if (result.success) {
                        // if (result.data[i].appStatus === '1') {
                        //     result.data[i].deploySrc = 'http://pics.sc.chinaz.com/Files/pic/icons128/652/enable_server.png'
                        // } else {
                        //     result.data[i].deploySrc = 'http://pics.sc.chinaz.com/Files/pic/icons128/652/desable_server.png'
                        // }
                        this.deploy = result.data
                    }
                })
            },

            handleClick1(row) {
                console.log(row)
                this.$nextTick(() => {
                    this.serviceid = row.serviceid
                    this.atomcode = row.atomcode
                    this.servcode = row.servcode
                })
            },
            // 表格鼠标移入事件
            handClick(row) {
                // console.log(row)
                this.$nextTick(() => {
                    this.serviceid = row.serviceid
                    this.atomcode = row.atomcode
                    this.servcode = row.servcode
                })
            },
            // 表格点击高亮
            tabCurrentChangeDetails(currentRowDetails, oldCurrentRowDetails) {
                this.currentRowDetails = currentRowDetails
            },
            tabCurrentChangeModify(currentRowModify, oldCurrentRowModify) {
                this.currentRowModify = currentRowModify
            },
            tabCurrentChangeQuery(currentRowQuery, oldCurrentRowQuery) {
                this.currentRowQuery = currentRowQuery
            },
            // 关闭详情
            closeDetails() {
                this.$router.push({
                    path: '/serverList'
                })
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb,
            subBox
        }
    }
</script>

<style scoped lang="less">
    .details {
        width: 100%;
        position: relative;

        .el-button.el-button--small {
            font-size: .12rem;
        }

        .icon {
            i {
                font-size: .3rem;
                position: absolute;
                right: -10px;
                top: -10px;
                color: #999;
            }
        }

        .detailsBox {
            height: 100%;
            margin-top: .2rem;
            /*background-color: pink;*/

            .serAllocation {
                /*margin-top: .2rem;*/
            }

            .btn {
                margin-right: 1rem;
            }

            .detailsMsg {
                span {
                    color: #999;
                    width: 1.5rem;
                    display: inline-block;
                    text-align: right;
                }

                p {
                    display: inline-block;
                    line-height: .5rem;
                }
            }

            .deployBox {
                width: 100%;

                li {
                    display: inline-block;
                    height: 3rem;
                    width: 10%;
                    margin-right: .3rem;
                    margin-bottom: .3rem;
                    margin-left: .5rem;
                    text-align: center;

                    .img {
                        width: 1rem;
                        height: 1.15rem;
                        /*background-color: pink;*/
                        margin-left: 15%;
                        margin-top: .5rem;
                    }

                    span {
                        display: inline-block;
                        margin-top: .1rem;
                    }
                }
            }
        }
    }
</style>
